<!doctype html>
<html>
<head>
    <title>Additional buttons</title>
    <meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

    <script src="../../codebase/webix/webix.js" type="text/javascript"></script>
    <script src="../../codebase/spreadsheet.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="../../codebase/webix/webix.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/spreadsheet.css">

    <script src="../common/data.js"></script>

    <style>
        .myicon_other{
            background: url("images/menu.svg");
        }
        .myicon_chart{
            background: url("images/chart.svg");
        }

        .myicon_image{
            background: url("images/image.svg");
        }
        .myicon_row{
            background: url("images/row.svg");
        }
        .myicon_column{
            background: url("images/column.svg");
        }
    </style>
</head>
<body>
<script type="text/javascript">


    webix.ui({
        id: "mypopup",
        view: "ssheet-suggest",
        template: "<span class='webix_ssheet_button_icon myicon_#icon#'></span> #value#",
        data:[
            {id: "insert_image", icon: "image", value: "Insert image"},
            {id: "insert_chart", icon: "chart",  value: "Insert chart"},
            { $template: "Separator" },
            {id: "insert_column", icon: "column", value: "Insert column"},
            {id: "insert_row", icon: "row",  value: "Insert row"}
        ]
    });
    webix.ready(function(){
        webix.ui({
            view:"spreadsheet",
            data: base_data,
            buttons: {
                "undo-redo": ["undo","redo"],
                "font": ["font-family","font-size","font-weight","font-style","text-decoration","color","background","borders"],
                "align": ["text-align","vertical-align","wrap","span"],
                "number": ["format"],
                "$other": [
                    {},
                    {
                        view: "button",  type:"htmlbutton", name: "a", width: 40,
                        label: "<span class='webix_ssheet_button_icon myicon_other'></span>",
                        tooltip: "Other options", popup: $$("mypopup")
                    }
                ]
            }
        });
    });
</script>
</body>
</html>